import React, { Component,lazy,Suspense } from 'react';
import {} from 'react-router-dom'
import { Switch,Route,Redirect } from 'react-router-dom';
import Loading from '../components/Loading'
import MyTabbar from '../components/MyTabbar'
import Notfound from './Notfound';

// 组件懒加载
var Home=lazy(()=>import('./Index/Home'))
var Cate=lazy(()=>import('./Index/Cate'))
var Allgoods=lazy(()=>import('./Index/Allgoods'))
var Mine=lazy(()=>import('./Index/Mine'))
var Shopcart=lazy(()=>import('./Index/Shopcart'))

class Index extends Component {
    render() {
        return (
            <div className='index'>
                {/* 定义二级路由 */}
                <Suspense fallback={<Loading/>}>
                    <Switch>
                        <Route exact path='/index/home' component={Home}/>
                        <Route exact path='/index/cate' component={Cate}/>
                        <Route exact path='/index/allgoods' component={Allgoods}/>
                        <Route exact path='/index/mine' component={Mine}/>
                        <Route exact path='/index/shopcart' component={Shopcart}/>
                        {/* 重定向 */}
                        <Redirect from='/index' to='/index/home'/>
                        <Route exact path='*' component={Notfound}/>
                    </Switch>
                </Suspense>
                <MyTabbar/>
            </div>
        );
    }
}

export default Index;